<template>
  <div class="chart-detail">
    <div class="" style="height:70px;" v-show="canShow"></div>
    <!-- 头部显示 -->
    <div class="detail-top detail-top-layout" :class="leftAnimate" :style="{width: navWidth + 'px', top: top + 'px'}">
      <div class="top-left">
        缴费人员分布情况
      </div>
      <div class="top-right" @click="goBack">
        返回
      </div>
    </div>
    <!-- 详情 -->
    <div class="detail-box detail-box-layout" :style="{height: height + 'px', top: top - 26 + 'px'}">
      <!-- 详情头部 -->
      <div class="chart-title-layout second-search">
        <!-- 头部左侧显示 -->
        <h3 class="chart-title">
          <div class="area-title-name" @mouseenter="mouseenter()"
               @mouseleave="mouseleave()">{{ areaTitle }} &nbsp; | &nbsp;  {{this.propParams.insuredName }}保险 &nbsp; | &nbsp; {{this.propParams.year}}年{{this.propParams.month}}月 &nbsp; | &nbsp; {{ this.propParams.explain }}
          </div>
        </h3>
        <!-- 头部右侧筛选 -->
        <div class="search-right">
          <div class="secondSearchBtn" @click="showSecondSearch">
            <svg class="searchSvg" style="float:left;" viewBox="0 0 1024 1024">
              <path :d="svgPath.searchBtn"></path>
            </svg>
            <div style="float:left;margin-left:10px;">
              <span class="search-tip" v-show="isAll==0">按条件筛选</span>
              <div class="search-choose-container" v-show="isAll>0">
                <span>{{sexText}}</span> |
                <span>{{ageText}}</span> |
                <span>{{unitText}}</span> |
                <span>{{professionText}}</span> |
                <span>{{employmentStatus}}</span>
              </div>
            </div>
          </div>
          <svg class="searchBtn searchSvg resetBtn" @click="checkedReset" viewBox="0 0 1024 1024">
            <path :d="svgPath.resetBtn1"></path>
            <path :d="svgPath.resetBtn2"></path>
          </svg>
        </div>
        <!-- 头部左侧显示浮窗  -->
        <div class="chart-title-floating" v-show="showFloating">
          <span>统筹区: {{ this.propParams.areaName }}</span><br>
          <span>险种: {{ this.propParams.insuredName }}</span><br>
          <span>年份: {{ this.propParams.year }}</span>
        </div>
      </div>
      <!-- 详情内容 -->
      <div :class="this.isShowChart ? '' : 'chart-content-wrapper'"
           style="height: 100%; overflow: auto; padding-top: 64px">
        <div class="content" v-show="isShowChart">
          <!--头部-->
          <div class="content-head" v-show="isShowChart">
            <div class="distribution-insured-persons-wrapper">
              <ul>
                <li class="left-card">
                  <div class="content-left">
                    <img src="../../../../assets/img/chart-svg/payment-all.svg" alt="" class="card-icon">
                    <span class="card-title">全部缴费人员</span>
                  </div>
                  <div class="content-right">
                    <span class="card-subTitle">缴费人员/占比</span>
                    <p>
                      <span class="card-number">{{this.bulkMap.numArray && this.bulkMap.numArray[0]}}</span>
                      <span class="card-numberUnit-numberRatio">
                      {{ this.bulkMap.measureArray && this.bulkMap.measureArray[0]}}
                      /{{this.bulkMap.rateArray && this.bulkMap.rateArray[0]}}%
                    </span>
                    </p>
                  </div>
                </li>
                <li class="middle-card">
                  <div class="content-left">
                    <img src="../../../../assets/img/chart-svg/payment-man.svg" alt="" class="card-icon">
                    <span class="card-title">男性缴费人员</span>
                  </div>
                  <div class="content-right">
                    <span class="card-subTitle">缴费人员/占比</span>
                    <p>
                      <span class="card-number">{{this.bulkMap.numArray && this.bulkMap.numArray[1]}}</span>
                      <span class="card-numberUnit-numberRatio">
                      {{ this.bulkMap.measureArray && this.bulkMap.measureArray[1]}}
                      /{{this.bulkMap.rateArray && this.bulkMap.rateArray[1]}}%
                    </span>
                    </p>
                  </div>
                </li>
                <li class="right-card">
                  <div class="content-left">
                    <img src="../../../../assets/img/chart-svg/payment-woman.svg" alt="" class="card-icon">
                    <span class="card-title">女性缴费人员</span>
                  </div>
                  <div class="content-right">
                    <span class="card-subTitle">缴费人员/占比</span>
                    <p>
                      <span class="card-number">{{this.bulkMap.numArray && this.bulkMap.numArray[2]}}</span>
                      <span class="card-numberUnit-numberRatio">
                      {{ this.bulkMap.measureArray && this.bulkMap.measureArray[2]}}
                      /{{this.bulkMap.rateArray && this.bulkMap.rateArray[2]}}%
                    </span>
                    </p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!--层叠图-->
          <div class="content-stack-diagram">
            <div class="chart-container" v-show="isShowChart">
              <div id="base-on-payment-people-analyse-detail-one-id" class="chart-type1">
              </div>
            </div>
          </div>
          <!--四个chart-->
          <div class="content-four-chart">
            <div class="content-four-chart-top">
              <div class="content-four-chart-left">
                <div class="chart-container" v-show="isShowChart">
                  <div class="four-chart-mini-title">
                    <span>单位类型</span>
                    <span class="title-bk-container"></span>
                  </div>
                  <div id="base-on-payment-people-analyse-detail-two-id" class="chart-type1"></div>
                </div>
              </div>
              <div class="content-four-chart-right">
                <div class="chart-container" v-show="isShowChart">
                  <div class="four-chart-mini-title">
                    <span>性别比例</span>
                    <span class="title-bk-container"></span>
                  </div>
                  <div id="base-on-payment-people-analyse-detail-three-id" class="chart-type1"></div>
                </div>
              </div>
            </div>
            <div class="content-four-chart-bottom">
              <div class="content-four-chart-left">
                <div class="chart-container" v-show="isShowChart">
                  <div class="four-chart-mini-title">
                    <span>就业情况</span>
                    <span class="title-bk-container"></span>
                  </div>
                  <div id="base-on-payment-people-analyse-detail-four-id" class="chart-type1"></div>
                </div>
              </div>
              <div class="content-four-chart-right">
                <div class="chart-container" v-show="isShowChart">
                  <div class="four-chart-mini-title">
                    <span>职业分布</span>
                    <span class="title-bk-container"></span>
                  </div>
                  <div id="base-on-payment-people-analyse-detail-five-id" class="chart-type1"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="second-search-box" v-show="showSearchBox">
      <div class="second-search-content">
        <div class="second-title">
          <div class="title-name">
            <span>请选择人员统计维度</span>
          </div>
          <div class="second-btn-box">
            <span class="dap-button" style="margin-right:10px;" @click="saveMessage">确定</span>
            <span class="dap-close-button" @click="hideBox">取消</span>
          </div>
        </div>
        <div class="second-main">
          <div class="second-item">
            <h3 class="second-item-name">
              <span class="left-circle-wrapper"></span>
              性别
            </h3>
            <ul class="second-contain">
              <li v-for="(item, index) in this.screenObj.sex" @click="chooseSex(index,item)"
                  :class="sexIndex==index ? 'activeLi' : ''">
                {{item.selectName}}
              </li>
            </ul>
            <div class="second-item-remind">备注：未知为身份证号码格式错误等数据异常原因，无法计算性别的人群</div>
          </div>

          <div class="second-item">
            <h3 class="second-item-name">
              <span class="left-circle-wrapper"></span>
              年龄段
            </h3>
            <ul class="second-contain">
              <input class="second-contain-input" type="number" maxlength="3" placeholder="不限" v-model="startAge">
              <span class="second-contain-input-span">~</span>
              <input class="second-contain-input" type="number" maxlength="3" placeholder="不限" v-model="endAge">
              <span class="second-contain-input-span">岁</span>
            </ul>
            <div class="second-item-remind">备注：年龄支持输入0-120岁的整数。</div>
          </div>

          <div class="second-item">
            <h3 class="second-item-name">
              <span class="left-circle-wrapper"></span>
              单位类型
            </h3>
            <ul class="second-contain">
              <li v-for="(item,index) in this.screenObj.compType" @click="chooseUnit(index,item)"
                  :class="unitIndex==index ? 'activeLi' : ''">
                {{item.selectName}}
              </li>
            </ul>
            <div class="second-item-remind">备注：其它为除上述单位类型外的其它人员</div>
          </div>

          <div class="second-item">
            <h3 class="second-item-name">
              <span class="left-circle-wrapper"></span>
              职业
            </h3>
            <ul class="second-contain">
              <li v-for="(item,index) in this.screenObj.occuType" @click="chooseProfession(index,item)"
                  :class="professionIndex==index ? 'activeLi' : ''">
                {{item.selectName}}
              </li>
            </ul>
            <div class="second-item-remind">备注：其它为除上述职业外的其它人员</div>
          </div>

          <div class="second-item">
            <h3 class="second-item-name">
              <span class="left-circle-wrapper"></span>
              就业状态
            </h3>
            <ul class="second-contain">
              <li v-for="(item,index) in this.screenObj.emplState" @click="chooseEmployment(index,item)"
                  :class="employmentIndex==index ? 'activeLi' : ''"
                  :style="{marginTop: (index > 6 ? 18 : 0) + 'px'}">
                {{item.selectName}}
              </li>
            </ul>
            <div class="second-item-remind">备注：其它为除上述就业状态外的其它人员</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import '../../../../assets/css/chartDetail.css'
  import {loadingOpt, svgPath} from '../../../../assets/js/utils.js'

  import {getQueryPayPersonDistriSitu} from '../../../../api/api'

  import job from '../../../../assets/img/chart-svg/job.svg'
  import career from '../../../../assets/img/chart-svg/career.svg'
  import company from '../../../../assets/img/chart-svg/company.svg'
  import other from '../../../../assets/img/chart-svg/other.svg'

  export default {
    props: {
      'isChange': {
        type: Number
      },
      'isCollapse': {
        type: Boolean,
        default: null
      }
    },
    data () {
      return {
        areaTitle: '',
        height: 800,
        canShow: true,
        showFloating: false,
        propParams: {}, // 传递过来的参数
        year: '',       //  年
        sex: '',        // 性别
        startAge: '',   // 起始年龄
        endAge: '',     // 结束年龄
        compType: '',   // 单位类型
        occuType: '',   // 职业类型
        emplState: '',  // 就业状态
        leftAnimate: '',
        navWidth: '800',
        top: '70',

        isShowChart: true,
        propData: {},

        // 整合
        bulkMap: [],
        job,
        career,
        company,
        other,
        defaultUnit: {'企业': 'company', '事业单位': 'career', '灵活就业': 'job', '其它': 'other'},

        // 筛选
        svgPath,
        showSearchBox: false,
        screenObj: {},

        sexText: '全部性别',
        ageText: '全部年龄',
        unitText: '全部单位类型',
        professionText: '全部职业',
        employmentStatus: '全部就业状态',

        sexIndex: 0,
        unitIndex: 0,
        professionIndex: 0,
        employmentIndex: 0,
        oldObj: {}, // 保存旧值
      }
    },
    mounted () {
      setTimeout(() => {
        this.initData();
        this.getContentH();
        this.initMyChart();
        this.getData();
        this.initScreenObj();
      }, 1);
    },
    watch: {
      isChange () {
        setTimeout(() => {
          this.getContentH();
          setTimeout(() => {
            this.resizeMyChart();
          }, 1)
        }, 211)
      },
      isCollapse (val) {
        this.getContentH();
      },
      startAge (newVal, oldVal) {
        let numNewVal = Number(newVal);
        if (numNewVal && (numNewVal < 0 || numNewVal > 120)) {
          this.startAge = oldVal;
        }
      },
      endAge (newVal, oldVal) {
        let numNewVal = Number(newVal);
        if (numNewVal && (numNewVal < 0 || numNewVal > 120)) {
          this.endAge = oldVal;
        }
      },
      showSearchBox (val) {
        let zIndex = val ? 200 : 10000002;
        document.querySelector('.el-header').style.zIndex = zIndex;
      },
    },
    computed: {
      isAll () {
        return this.sexIndex + this.unitIndex + this.professionIndex + this.employmentIndex +
          this.startAge.length + this.endAge.length;
      }
    },
    methods: {
      // 选择性别
      chooseSex (index, item) {
        this.sexIndex = index;
        this.sex = item.selectId;
        this.sexText = item.selectName
      },
      // 选择单位类型
      chooseUnit (index, item) {
        this.unitIndex = index;
        this.compType = item.selectId;
        this.unitText = item.selectName
      },
      // 选择职业
      chooseProfession (index, item) {
        this.professionIndex = index;
        this.occuType = item.selectId;
        this.professionText = item.selectName
      },
      // 选择在职状态
      chooseEmployment (index, item) {
        this.employmentIndex = index;
        this.emplState = item.selectId;
        this.employmentStatus = item.selectName
      },
      // 确认按钮
      saveMessage () {

        this.submitCheckInput();

        this.getData();
        this.showSearchBox = false;
      },
      // 提交前处理输入框
      submitCheckInput () {
        if (this.startAge && this.endAge && Number(this.startAge) > Number(this.endAge)) {
          let temp = this.startAge;
          this.startAge = this.endAge;
          this.endAge = temp;
        }

        let start = this.startAge;
        let end = this.endAge;
        if (!start.length && !end.length) {
          this.ageText = '全部年龄';
        } else {
          this.ageText = (start.length ? start : '0') + '-' + (end.length ? end : '120') + '岁';
        }

      },
      // 取消按钮
      hideBox () {

        // 从新赋值旧值
        this.sexIndex = this.oldObj.sexIndex;
        this.unitIndex = this.oldObj.unitIndex;
        this.professionIndex = this.oldObj.professionIndex;
        this.employmentIndex = this.oldObj.employmentIndex;

        this.startAge = this.oldObj.startAge;
        this.endAge = this.oldObj.endAge;

        this.sex = this.oldObj.sex;
        this.startAge = this.oldObj.startAge;
        this.endAge = this.oldObj.endAge;
        this.compType = this.oldObj.compType;
        this.occuType = this.oldObj.occuType;
        this.emplState = this.oldObj.emplState;

        this.showSearchBox = false;
      },
      // 重置按钮
      checkedReset () {
        this.sexIndex =
          this.unitIndex =
            this.professionIndex =
              this.employmentIndex = 0;
        this.startAge =
          this.endAge = '';

        // 发送请求数据
        this.sex =
          this.startAge =
            this.endAge =
              this.compType =
                this.occuType =
                  this.emplState = '';

        this.getData();
      },
      // 筛选按钮点击
      showSecondSearch () {
        this.saveOldObj();
        this.showSearchBox = true;
      },
      // 保存旧值
      saveOldObj () {
        let oldObj = {};

        oldObj.sexIndex = this.sexIndex;
        oldObj.unitIndex = this.unitIndex;
        oldObj.professionIndex = this.professionIndex;
        oldObj.employmentIndex = this.employmentIndex;

        oldObj.startAge = this.startAge;
        oldObj.endAge = this.endAge;

        oldObj.sex = this.sex;
        oldObj.startAge = this.startAge;
        oldObj.endAge = this.endAge;
        oldObj.compType = this.compType;
        oldObj.occuType = this.occuType;
        oldObj.emplState = this.emplState;

        this.oldObj = oldObj;
      },
      // 初始化数据
      initData () {
        let data = this.$route.query;
        this.propParams = {
          'areaName': data.areaName,
          'areaCode': data.areaCode,
          'insuredName': data.insuredName,
          'insuredCode': data.insuredCode,
          'year': data.year,
          'month': data.month,
          'explain': data.explain,
          'explainCode': data.explainCode,
          'hash': data.hash,
        };
        this.areaTitle = this.filterLogText(this.propParams.areaName);
      },
      initMyChart () {
        this.myChart1 = this.$echarts.init(document.getElementById('base-on-payment-people-analyse-detail-one-id'));
        this.myChart2 = this.$echarts.init(document.getElementById('base-on-payment-people-analyse-detail-two-id'));
        this.myChart3 = this.$echarts.init(document.getElementById('base-on-payment-people-analyse-detail-three-id'));
        this.myChart4 = this.$echarts.init(document.getElementById('base-on-payment-people-analyse-detail-four-id'));
        this.myChart5 = this.$echarts.init(document.getElementById('base-on-payment-people-analyse-detail-five-id'));
      },
      resizeMyChart () {
        this.myChart1.resize();
        this.myChart2.resize();
        this.myChart3.resize();
        this.myChart4.resize();
        this.myChart5.resize();
      },
      clearMyChart () {
        this.myChart1.clear();
        this.myChart2.clear();
        this.myChart3.clear();
        this.myChart4.clear();
        this.myChart5.clear();
      },
      loadingMyChart (val) {
        if (val) {
          this.myChart1.showLoading(loadingOpt);
          this.myChart2.showLoading(loadingOpt);
          this.myChart3.showLoading(loadingOpt);
          this.myChart4.showLoading(loadingOpt);
          this.myChart5.showLoading(loadingOpt);
        } else {
          this.myChart1.hideLoading();
          this.myChart2.hideLoading();
          this.myChart3.hideLoading();
          this.myChart4.hideLoading();
          this.myChart5.hideLoading();
        }
      },

      setChart1Data (data) {
        let json = {};
        json.legend = ['全部缴费人员', '男性缴费人员', '女性缴费人员'];
        json.XAxis = data.allAgeList;
        json.allNumber = data.allNumList;
        json.manNumber = data.nanNumList;
        json.womanNumber = data.nvNumList;

        // 显示
        json.allTitle = data.allMeasureList;
        json.manTitle = data.nanMeasureList;
        json.womanTitle = data.nvMeasureList;

        this.drawChart1Line(json);
      },
      drawChart1Line (json) {

        let showFormatter = function (params) {
          return `<sapn style="color: #fff">缴费人数</sapn></br>
                          <span style="color: #fff">年龄: ${params[0].name}岁</span></br>
                          <span style="color: #fff">全部缴费人员: ${json.allTitle[params[0].dataIndex]}</span></br>
                          <span style="color: #fff">男性缴费人员: ${json.manTitle[params[0].dataIndex]}</span></br>
                          <span style='color:#fff'>女性缴费人员: ${json.womanTitle[params[0].dataIndex]}</span>`
        };
        let option = {
          tooltip: {
            confine: true,
            trigger: 'axis',
            axisPointer: {
              type: 'line',
              label: {
                backgroundColor: '#6a7985'
              }
            },
            show: true,
            textStyle: {
              fontSize: 12
            },
            formatter: showFormatter,
          },
          legend: {
            data: json.legend,
            textStyle: {
              color: '#fff',
            }
          },
          grid: {
            left: '10%',
            height: '70%',
            width: '80%',
            top: '10%'
          },
          xAxis: [
            {
              name: '单位 : 岁',
              nameTextStyle: {
                color: '#fff',
              },
              type: 'category',
              boundaryGap: false,
              data: json.XAxis,
              axisTick: {
                show: false
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#2a4565'
                }
              },
              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  color: '#fff'
                }
              },
            }
          ],
          yAxis: [
            {
              axisPointer: {
                label: {
                  precision: 0
                }
              },
              name: '人数',
              nameTextStyle: {
                color: '#fff',
              },
              type: 'value',
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#2a4565'
                }
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#2a4565'
                }
              },
              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  color: '#fff'
                }
              },
              splitLine: {
                show: false
              }
            }
          ],
          series: [
            {
              name: json.legend[0],
              type: 'line',
              color: 'rgba(41, 176, 158, 0.4)',
              smooth: true,
              symbol: 'none',
              itemStyle: {
                normal: {
                  areaStyle: {
                    type: 'default'
                  },
                },
              },
              data: json.allNumber,
            },
            {
              name: json.legend[1],
              type: 'line',
              color: 'rgba(50, 129, 253, 0.4)',
              smooth: true,
              symbol: 'none',
              itemStyle: {
                normal: {
                  areaStyle: {
                    type: 'default'
                  }
                }
              },
              data: json.manNumber,
            },
            {
              name: json.legend[2],
              type: 'line',
              color: 'rgba(255, 106, 147, 0.4)',
              smooth: true,
              symbol: 'none',
              itemStyle: {
                normal: {
                  areaStyle: {
                    type: 'default'
                  }
                }
              },
              data: json.womanNumber,
            },
          ]
        };
        this.myChart1.setOption(option);
      },
      setChart2Data (data) {
        let json = {};

        json.yAxis = data.nameArray;
        json.number = data.numRealArray;
        json.tipNumber = data.measureArray;
        json.tipNumberRatio = data.rateArray;
        this.drawChart2Line(json);
      },
      drawChart2Line (json) {
        let that = this;
        let option = {
          tooltip: {
            confine: true,
            formatter: function (params) {
              let i = params.dataIndex;
              let txt = `<p style="color: #fff; font-size: 12px">缴费人数</p>
                         <p style="color: #fff; font-size: 12px">单位类型: ${json.yAxis[i]}</p>
                         <p style="color: #fff; font-size: 12px">人数: ${json.tipNumber[i]}</p>
                         <p style="color: #fff; font-size: 12px">占比: ${json.tipNumberRatio[i]}%</p>
              `;
              return txt;
            }
          },
          grid: {
            left: '25%',
            height: '70%',
            width: '60%',
            top: '10%'
          },
          xAxis: {
            splitLine: {show: false},
            axisLine: {show: false},
            axisLabel: {show: false,},
            axisTick: {show: false}
          },
          yAxis: {
            data: json.yAxis,
            inverse: true,
            axisLine: { //y轴的横线是否显示
              show: false,
            },
            axisTick: { //y轴的刻度短竖线是否显示
              show: false
            },
            axisLabel: {
              formatter: function (value) {
                let img = that.defaultUnit[value];
                if (img) {
                  return `{a|${value}}{${img}|}`
                } else {
                  return `{a|${value}}`
                }
              },
              textStyle: {
                color: '#fff'
              },
              rich: {
                a: {
                  padding: [0, 10, 0, 0]
                },
                other: {
                  backgroundColor: {
                    image: that.other
                  },
                  height: 20
                },
                job: {
                  backgroundColor: {
                    image: that.job
                  },
                  height: 20
                },
                career: {
                  backgroundColor: {
                    image: that.career
                  },
                  height: 20
                },
                company: {
                  backgroundColor: {
                    image: that.company
                  },
                  height: 20
                },
              }
            }
          },
          series: [{
            type: 'bar',
            showSymbol: false,
            barGap: 0,
            itemStyle: {
              color: '#29b69d',
              borderWidth: 0
            },
            data: json.number,
            label: {
              show: true,
              position: 'right',
              formatter: function (params) {
                let i = params.dataIndex;
                return `${json.tipNumber[i]}`
              },
              color: '#fff'
            },
            barWidth: '40%',
            barMaxWidth: '40%',
          }]
        };
        this.myChart2.setOption(option);
      },
      setChart3Data (data, allNums) {
        let json = {};
        let obj = [];
        for (let i = 0; i < data.length; i++) {
          let item = data[i];
          let sexObj = {};
          sexObj.value = item.sexNum;
          sexObj.name = item.sexName == '空白' ? '' : (item.sexName + item.sexRate + '%');
          sexObj.number = item.measure;
          sexObj.numberRatio = item.sexRate;
          if (i < 3) {
            obj.push(sexObj);
          } else if (i == 3 && sexObj.value > 0) {
            obj.push(sexObj);
          }
        }

        json.pieObj = obj;
        json.allNumber = allNums;

        this.drawChart3Line(json);
      },
      drawChart3Line (json) {
        let option = {
          tooltip: {
            confine: true,
            trigger: 'item',
            formatter: function (params) {

              if (params.name == '') {
                return ''
              }

              return `<span style="color: #fff; font-size: 12px">缴费人数</span></br>
                      <span style="color: #fff; font-size: 12px">性别: ${params.name.substr(0, 2)}</span></br>
                      <span style="color: #fff; font-size: 12px">人数: ${params.data.number}</span></br>
                      <span style="color: #fff; font-size: 12px">占比: ${params.data.numberRatio}%</span>`;
            }
          },
          legend: {
            orient: 'vertical',
            x: '70%',
            y: '30%',
            icon: 'rect',
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 20,
            selectedMode: false,
            textStyle: {
              color: '#fff',
            },
          },
          series: [
            {
              minAngle: 5,
              type: 'pie',
              radius: ['40%', '60%'],
              center: ['40%', '40%'],
              avoidLabelOverlap: false,
              hoverAnimation: false,
              animation: false,
              label: {
                show: true,
                position: 'center',
                rich: {
                  textAlign: 'center',
                  a: {
                    color: '#29b69d',
                    fontSize: 18,
                    lineHeight: 24,
                    textAlign: 'right',
                    fontWeight: 'bolder ',
                  },
                  b: {
                    color: '#29b69d',
                    fontSize: 12,
                    fontWeight: 'bolder ',
                  }
                },
                formatter: function (params) {
                  if (params.dataIndex == json.pieObj.length - 1) {
                    return `{a|${json.allNumber}}\n{b|缴费人数}`
                  } else {
                    return ''
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              itemStyle: {
                color: function (params) {
                  let colorList = ['#3281fd', '#ff6a93', '#8a8a8a', '#ccc'];
                  return colorList[params.dataIndex]
                }
              },
              data: json.pieObj
            }
          ]
        };

        this.myChart3.setOption(option);
      },
      setChart4Data (data) {
        let json = {};
        json.xAxis = data.nameArray;
        json.labelTitle = data.numRealArray;
        json.number = data.measureArray;
        json.numberRatio = data.rateArray;

        this.drawChart4Line(json);
      },
      drawChart4Line (json) {
        let option = {
          tooltip: {
            confine: true,
            trigger: 'axis',
            axisPointer: {
              type: 'none'
            },
            formatter: function (params) {
              let index = params[0].dataIndex;
              let txt = `<p style="color: #fff; font-size: 12px">缴费人数</p>`
                + `<p style="color: #fff; font-size: 12px">就业情况: ${json.xAxis[index]}</p>`
                + `<p style="color: #fff; font-size: 12px">人数：${json.number[index]}</p>`
                + `<p style="color: #fff; font-size: 12px">占比：${json.numberRatio[index]}%</p>`;
              return txt;
            },
          },
          grid: {
            left: '20%',
            height: '60%',
            width: '60%',
            top: '10%'
          },
          xAxis: {
            data: json.xAxis,
            axisTick: {show: false},
            axisLine: {show: false},
            axisLabel: {
              interval: 0,
              textStyle: {
                color: '#fff'
              }
            }
          },
          yAxis: {
            splitLine: {show: false},
            axisTick: {show: false},
            axisLine: {show: false},
            axisLabel: {show: false}
          },
          color: ['#32cfe8'],
          series: [{
            barMinHeight: 5,
            name: 'hill',
            type: 'pictorialBar',
            barCategoryGap: '-100%',
            symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            itemStyle: {
              normal: {
                opacity: 0.6
              },
              emphasis: {
                opacity: 1
              }
            },
            label: {
              show: true,
              position: 'top',
              formatter: function (params) {
                let index = params.dataIndex;
                return `${json.number[index]}`
              },
              color: '#fff'
            },
            data: json.labelTitle,
          }]
        };

        this.myChart4.setOption(option);
      },
      setChart5Data (data) {
        let json = {};
        json.xAxis = data.nameArray;
        json.labelTitle = data.numRealArray;
        json.number = data.measureArray;
        json.numberRatio = data.rateArray;

        this.drawChart5Line(json);
      },
      drawChart5Line (json) {
        let option = {
          tooltip: {
            confine: true,
            trigger: 'axis',
            axisPointer: {
              type: 'none'
            },
            formatter: function (params) {
              let index = params[0].dataIndex;
              let txt = `<p style="color: #fff; font-size: 12px">缴费人数</p>`
                + `<p style="color: #fff; font-size: 12px">职业: ${json.xAxis[index]}</p>`
                + `<p style="color: #fff; font-size: 12px">人数：${json.number[index]}</p>`
                + `<p style="color: #fff; font-size: 12px">占比：${json.numberRatio[index]}%</p>`;
              return txt;
            },
          },
          grid: {
            left: '20%',
            height: '60%',
            width: '60%',
            top: '10%'
          },
          xAxis: {
            data: json.xAxis,
            axisTick: {show: false},
            axisLine: {show: false},
            axisLabel: {
              textStyle: {
                color: '#fff'
              }
            }
          },
          yAxis: {
            splitLine: {show: false},
            axisTick: {show: false},
            axisLine: {show: false},
            axisLabel: {show: false}
          },
          color: ['#32cfe8'],
          series: [{
            barMinHeight: 5,
            name: 'hill',
            type: 'pictorialBar',
            barCategoryGap: '-100%',
            symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            itemStyle: {
              normal: {
                opacity: 0.6
              },
              emphasis: {
                opacity: 1
              }
            },
            label: {
              show: true,
              position: 'top',
              formatter: function (params) {
                let index = params.dataIndex;
                return `${json.number[index]}`
              },
              color: '#fff'
            },
            data: json.labelTitle,
          }]
        };

        this.myChart5.setOption(option);
      },

      getData () {

        this.loadingMyChart(true);

        getQueryPayPersonDistriSitu('report/queryPayPersonDistriSitu', this.propParams.year + this.propParams.month, this.propParams.areaCode,
          this.propParams.insuredCode, this.sex, this.startAge, this.endAge, this.compType, this.occuType, this.emplState,
          this.propParams.explainCode)
          .then(response => {
            this.propData = response;


            if (response.code == 0) {

              this.loadingMyChart(false);
              this.isShowChart = true;

              this.setChart1Data(response.data.ageMap);
              this.setChart2Data(response.data.compTypeMap);
              this.setChart3Data(response.data.sexList, response.data.allNums);
              this.setChart4Data(response.data.emplStateMap);
              this.setChart5Data(response.data.occuTypeMap);

            } else {
              this.isShowChart = false;
              return;
            }

            this.bulkMap = response.data.bulkMap;
          });
      },
      // 设置高度
      getContentH () {
        let height = document.querySelector('body').clientHeight;
        let bodyWidth = document.querySelector('body').clientWidth;

        let top = 0;
        let barHeight = 0;
        let titleHeight = 44;
        let marginHeight = 40;


        let sideWidth = 0;

        // 全屏的时候没有
        if (document.querySelector('.el-header')) {
          top = 70;
          barHeight = document.querySelector('.el-header').clientHeight;
        }

        // 左边的全屏也没有
        if (document.querySelector('.el-aside')) {
          sideWidth = document.querySelector('.el-aside').clientWidth;
          this.leftAnimate = 'open-left-menu'
        } else {
          this.leftAnimate = 'close-left-menu'
        }

        this.top = top;
        this.navWidth = bodyWidth - sideWidth;
        this.height = height - barHeight - titleHeight - marginHeight - 6;
      },
      goBack () {
        this.$router.push(this.propParams.hash.slice(1,this.propParams.hash.length));
        sessionStorage.setItem ('isPrev',1)

      },
      // 字数太长省略
      filterLogText (value, leng = 7) {
        if (value.length <= leng) {
          return value;
        } else {
          return value.slice(0, leng) + '...';
        }
      },
      mouseenter () {
        this.showFloating = true;
      },
      mouseleave () {
        this.showFloating = false;
      },
      initScreenObj () {
        var emplState = [
          {
            "selectId": "",
            "selectName": "全部就业状态"
          },
          {
            "selectId": "01",
            "selectName": "在业"
          },
          {
            "selectId": "03",
            "selectName": "退休"
          },
          {
            "selectId": "02",
            "selectName": "离休"
          },
          {
            "selectId": "04",
            "selectName": "退职"
          },
          {
            "selectId": "05",
            "selectName": "失业"
          },
          {
            "selectId": "07",
            "selectName": "从未就业"
          },
          {
            "selectId": "08",
            "selectName": "其它"
          }
        ];
        if (this.propParams.insuredCode == '1002') {
          emplState = [
            {
              "selectId": "",
              "selectName": "全部就业状态"
            },
            {
              "selectId": "01",
              "selectName": "在业"
            },
            {
              "selectId": "03",
              "selectName": "退休"
            },
            {
              "selectId": "02",
              "selectName": "离休"
            },
            {
              "selectId": "08",
              "selectName": "其它"
            }
          ];
        }

        this.screenObj = {
          "compType": [
            {
              "selectId": "",
              "selectName": "全部单位"
            },
            {
              "selectId": "1",
              "selectName": "企业"
            },
            {
              "selectId": "2",
              "selectName": "事业单位"
            },
            {
              "selectId": "3",
              "selectName": "灵活就业"
            },
            {
              "selectId": "9",
              "selectName": "其它"
            }
          ],
          "occuType": [
            {
              "selectId": "",
              "selectName": "全部职业"
            },
            {
              "selectId": "1",
              "selectName": "工人"
            },
            {
              "selectId": "5",
              "selectName": "公务员"
            },
            {
              "selectId": "4",
              "selectName": "干部"
            },
            {
              "selectId": "9",
              "selectName": "其它"
            }
          ],
          "emplState": emplState,
          "sex": [
            {
              "selectId": "",
              "selectName": "全部性别"
            },
            {
              "selectId": "1",
              "selectName": "男"
            },
            {
              "selectId": "2",
              "selectName": "女"
            },
            {
              "selectId": "3",
              "selectName": "未知"
            }
          ]
        }
      },
    },
  }
</script>

<style scoped>

  /* css 引用 */
  @import '../../../../assets/css/decision.css';
  /* 必须在decision 下*/
  @import '../../../../assets/css/portrait-personk-detail.css';
</style>
